<!--
 * new page
 * @author: zhuangming
 * @since: 2025-02-21
 * dayOrder.vue
-->
<template>
  <view class="container">
    <view>
      <view style="display: flex; justify-content: space-between; align-items: center">
        <uni-datetime-picker v-model="selectedDate" type="daterange" />
        <button
          style="
            width: 80px;
            height: 36px;
            margin-left: 10px;
            background-color: #409eff;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 28rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="getDayOrder"
        >
          搜索
        </button>
      </view>
      <view class="order-top">
        <view class="order_top_div">
          <span>商户收入：</span>
          <span>{{ totalPrice }}</span>
        </view>
        <view class="order_top_div">
          <span>商户支出：</span>
          <span>{{ refundTotalPrice }}</span>
        </view>
      </view>
      <view class="order_bot_div">
        <span>平台手续费：</span>
        <span>{{ Number(platformCommissionRate).toFixed(2) }}</span>
      </view>
      <view class="order_list">
        <view v-for="(order, index) in orders" :key="index" class="order_item" @click="goDetail(order)">
          <view class="order_item_div">
            <span>订单日期：</span>
            <span>{{ order.dat }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内收入：</span>
            <span>{{ Number(order.totalPrice).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内支出：</span>
            <span>{{ order.refundPrice }}</span>
          </view>
          <view class="order_item_div">
            <span>账户应入账金额：</span>
            <span>{{ Number(order.receivableTotalPrice).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>平台手续费</span>
            <span>{{ Number(order.platformCommissionRate).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span
              >总共<span style="color: red; margin: 0 5px"> {{ order.count }} </span>笔</span
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { dayOrderIndex } from '../../utils/merorder/mer';
export default {
  data() {
    return {
      selectedDate: '', // 默认选中当前日期
      platformCommissionRate: '', //平台手续费
      refundTotalPrice: '', //商户支出
      totalPrice: '', //商户收入
      orders: [
        {
          dat: '',
          platformCommissionRate: '', //平台手续费
          receivableTotalPrice: '', //商户应入账金额
          refundPrice: '', //账期内支出
          totalPrice: '' //商户收入
        }
      ]
    };
  },
  methods: {
    // 查询订单列表
    getDayOrder() {
      if (!this.selectedDate) {
        const params = {
          dateParam: '',
          merId: uni.getStorageSync('merId') || 0,
          queryType: '0'
        };
        dayOrderIndex(params).then((res) => {
          const orders = res.data.ebmerBillVoList;
          // 处理订单数据，按年月汇总
          const monthlyOrders = this.summarizeOrdersByMonth(orders);
          this.orders = monthlyOrders;
          this.platformCommissionRate = res.data.platformCommissionRate;
          this.refundTotalPrice = res.data.refundTotalPrice;
          this.totalPrice = res.data.totalPrice;
        });
      } else if (this.selectedDate) {
        const params = {
          dateParam: this.selectedDate[0].replace(/-/g, '/') + '-' + this.selectedDate[1].replace(/-/g, '/'),
          merId: uni.getStorageSync('merId') || 0,
          queryType: '3'
        };
        dayOrderIndex(params).then((res) => {
          const orders = res.data.ebmerBillVoList;
          // 处理订单数据，按年月汇总
          const monthlyOrders = this.summarizeOrdersByMonth(orders);
          this.orders = monthlyOrders;
          this.platformCommissionRate = res.data.platformCommissionRate;
          this.refundTotalPrice = res.data.refundTotalPrice;
          this.totalPrice = res.data.totalPrice;
        });
      }
    },
    // 按年月汇总订单
    summarizeOrdersByMonth(orders) {
      const monthlyMap = new Map();

      orders.forEach((order) => {
        const date = new Date(order.dat);
        const yearMonth = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`;

        if (!monthlyMap.has(yearMonth)) {
          monthlyMap.set(yearMonth, {
            dat: yearMonth,
            platformCommissionRate: 0,
            receivableTotalPrice: 0,
            refundPrice: 0,
            totalPrice: 0,
            count: 0,
            ids: [] // 添加 ids 数组
          });
        }

        const monthlyOrder = monthlyMap.get(yearMonth);
        monthlyOrder.platformCommissionRate += Number(order.platformCommissionRate);
        monthlyOrder.receivableTotalPrice += Number(order.receivableTotalPrice);
        monthlyOrder.refundPrice += Number(order.refundPrice);
        monthlyOrder.totalPrice += Number(order.totalPrice);
        monthlyOrder.count += order.count || 1;
        monthlyOrder.ids.push(order.ids); // 收集 ids
      });

      return Array.from(monthlyMap.values());
    },
    // 跳转订单详情
    goDetail(order) {
      const ids = order.ids.join(','); // 将 ids 拼接成字符串
      uni.navigateTo({
        url: `/pages_sh/myOrder/index-daling?ids=${ids}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}

.order-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  background-color: #f5f5f5;
}

.order_top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_bot_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_list {
  margin-top: 20px;
}

.order_item {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10rpx;
}

.order_item_div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>
